<template>
  <div class="jsm_body">
    <Header></Header>
    <div class="header-img">
      <img src="../../assets/img/header1.png" alt="">
    </div>
    <Frame>
      <h style="display: none">{{ nid }}</h>
      <h1 slot="contitle" class="title">{{ list.journalism.journalismTitle }}</h1>
      <div slot="text">
        <el-page-header @back="goBack" class="goBack" content="详情页面">
        </el-page-header>
        <div class="dts-body">
          <div class="author">
            <p class="author-p">
              <span>{{ list.journalism.journalismTimeYear }}-{{ list.journalism.journalismTimeMonth }}-{{ list.journalism.journalismTimeDay }}</span>
              <span>信息来源：旗帜软件工作室</span>
            </p>
            <span>编辑：陈保健</span>
            <i>|</i>
            <span>责编：陈保健</span>
          </div>
          <div class="writing">
            <div v-for="(item,index) in list.journalismParagraphs">
              <div v-for="item1 in list.journalismPhotos" v-if="item1.journalismParagraphNumber===(index+1)"
                   class="img">
                <el-card :body-style="{ padding: '0px'}">
                  <img :src="item1.photoAddress" class="image">
                </el-card>
              </div>
              <p class="news-content">{{ item.content }}</p>
            </div>
          </div>
        </div>

      </div>
    </Frame>
    <Bottom></Bottom>
  </div>
</template>

<script>
const Frame = () => import('../Frame')
const Header = () => import('../Header')
const Bottom = () => import('../Bottom')
export default {
  name: "Journalism",
  components: {
    Header,
    Bottom,
    Frame
  },
  data() {
    return {
      newsId: '',
      list: []
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  computed: {
    nid() {
      this.newsId = this.$route.params.nid
      return this.$route.params.nid
    }
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/journalismFrontDesk/selectJournalismFrontDesk',
        method: 'get',
        params: {
          id: this.newsId
        }

      }).then(res => {
        this.list = res.obj
      })
    })
  }

}
</script>

<style lang="less" scoped>
.jsm_body {
  background-color: #eeeeee;
}

.header-img {
  margin-top: 45px;

  img {
    width: 100%;
    height: 25em;
  }
}

.father-head {
  height: 85px;
  background-color: #eeeeee;
}

.dts-body {
  margin-top: 40px;

  .author {
    padding: 10px 0 10px 10px;
    color: #646464;
    font-size: 13px;
    border-left: 1px solid #dbdbdb;

    span {
      margin: 0 10px;
      color: #646464;
    }
  }

  .img {
    margin: 25px auto;
    max-width: 650px;
    max-height: 400px;
  }

  .writing {
    margin: 20px auto;
    max-width: 900px;

    p {
      text-indent: 2em;
      font-size: 17px;
      margin: 16px 0;
    }
  }
}

.image {
  width: 100%;
  display: block;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}

@media screen and (max-width: 850px) {
  .header-img {
    margin-top: 0px;

    img {
      height: 15em;
    }
  }

  .goBack {
    display: none;
  }

  .dts-body {
    .author {
      padding: 0px 0 0 0;
      font-size: 12px !important;
    }

    .writing {
      margin: 0px auto !important;

      p {
        //font-size: 14px !important;
        margin: 8px 0;
      }
    }

  }


}
</style>
